<template>
  <div class="spellpre" :style="getPageStyle">
    <div class="spellpre__header" :style="getPageStyle">
      <span class="spellpre__header--title">{{ formData.title }}</span>
      <span class="spellpre__header--more"
        >查看更多
        <i class="el-icon-arrow-right"></i>
      </span>
    </div>
    <div class="spellpre__headtemp"></div>
    <div
      :class="{
        liveList: true,
        liveListBig: formData.listStyle == 1,
        liveListScroll: formData.listStyle == 3,
      }"
    >
      <div
        :class="{
          liveListItem: true,
          liveItemBig: formData.listStyle == 1,
          liveItemScroll: formData.listStyle == 3,
        }"
        v-for="(item, index) in +formData.count"
        :key="index"
        :style="getGoodsStyle"
      >
        <img
          src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2203762303,14815638&fm=26&gp=0.jpg"
        />
        <div class="live-item-head">
          <span class="head-no-live">未开始</span>
          <span class="head-text">101观看2</span>
        </div>
        <div>
          <div class="live-item-center">直播标题</div>
          <div class="live-item-bottom">
            <div class="live-anchor">昵称</div>
            <div class="live-like">
              <img
                src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/like.png"
              />
              97
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import HomeLive from "./HomeLive";

@Component
export default class HomeLivePreview extends Vue {
  @Prop()
  formData: HomeLive;

  /**
   * 动态设置页面样式
   */
  get getPageStyle() {
    return { padding: `0px ${this.formData.pagePadding}px` };
  }

  /**
   * 设置class值
   */
  get getGoodsClass() {
    const { listStyle } = this.formData;
    // 1大图模式 2一行两个 3横向滑动
    const styles = ["spellpre__goodsL", "spellpre__goodsB"];
    return styles[+listStyle - 1];
  }

  /**
   * 动态设置style
   */
  get getGoodsStyle() {
    let margin = `${+this.formData.goodsPadding / 2}px 0px`;
    if (this.formData.doodsAngle == 2) {
      return { margin };
    } else {
      return { margin, borderRadius: "8px", overflow: "hidden" };
    }
  }

  /**
   * 获取边框样式
   */
  get getBorderStyle() {
    const { doodsAngle } = this.formData;
    return doodsAngle;
  }
}
</script>
<style lang="scss">
@import "./index.scss";
</style>
